import React from 'react';
import {
    Card,
    Form,
    Input,
    Button,
    message,
    Icon,
    Checkbox,
    Radio,
    Select,
    Switch,
    DatePicker,
    Upload,
    TimePicker,
    InputNumber,
} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

class FormRegister extends React.Component {
    state = {};

    handleSubmit  = () => {
        const userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err,values) => {
            if (!err)
            message.success('注册成功！')
        })


        console.log('userInfo',userInfo)

    }


    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({loading: true});
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                userImg: imageUrl,
                loading: false,
            }));
        }
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            //label不同尺寸屏幕下的显示
            labelCol: {
                xs: 24,
                sm: 4
            },
            //输入框等内容的
            wrapperCol: {
                xs: 24,
                sm: 12

            },
        };
        const offsetLayout = {
            wrapperCol: {
                xs: 24,
                sm: {
                    span: 12,
                    offset: 4  //xia向右偏移四列，
                }
            }
        };
        const rowObject = {
            minRows: 4, maxRows: 6
        }

        return (
            <div>
                <Card title="注册表单">
                    <Form>
                        <FormItem
                            {...formItemLayout}
                            label="用户名">
                            {
                                getFieldDecorator('userName', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '用户名不能为空！'
                                        },

                                    ]
                                })(
                                    //执行的语句
                                    <Input placeholder="请输入用户名"/>
                                )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="密码">
                            {
                                getFieldDecorator('passWord', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '密码不能为空！'
                                        },

                                    ]
                                })(
                                    //执行的语句
                                    <Input type="password" placeholder="请输入密码"/>
                                )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="性别">
                            {
                                getFieldDecorator('sex', {})(
                                    <RadioGroup>
                                        <Radio value='1'>女</Radio>
                                        <Radio value='2'>男</Radio>
                                    </RadioGroup>
                                )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="年龄">
                            {
                                getFieldDecorator('age', {
                                    initialValue: '18',

                                })(
                                    <InputNumber/>
                                )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="当前职业">
                            {
                                getFieldDecorator('occupation', {
                                    initialValue: '1',

                                })(
                                    <Select>
                                        <Option value="1">老师</Option>
                                        <Option value="2">教授</Option>
                                        <Option value="3">警察</Option>
                                        <Option value="4">程序员</Option>

                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="爱好">
                            {
                                getFieldDecorator('interest', {
                                    initialValue: ['1', '3'],

                                })(
                                    <Select mode="multiple">
                                        <Option value="1">篮球</Option>
                                        <Option value="2">羽毛球</Option>
                                        <Option value="3">桌球</Option>
                                        <Option value="4">爬山</Option>
                                        <Option value="5">攀登</Option>

                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="是否已婚">
                            {
                                getFieldDecorator('isMarried', {
                                    valuePropName: 'checked',
                                    initialValue: true
                                })(
                                    <Switch/>
                                )
                            }
                        </FormItem>

                        <FormItem

                            {...formItemLayout}
                            label="出生日期">
                            {
                                getFieldDecorator('birthday', {
                                    initialValue: moment('2018-08-08')
                                })(
                                    <DatePicker
                                        showTime
                                        format="YYYY-MM-DD HH:mm:ss"
                                    />
                                )
                            }
                        </FormItem>
                        <FormItem label="联系地址" {...formItemLayout}>
                            {
                                getFieldDecorator('address',{
                                    initialValue:'北京市海淀区奥林匹克公园'
                                })(
                                    <TextArea
                                        autosize={rowObject}
                                    />
                                )
                            }
                        </FormItem>
                        <FormItem

                            {...formItemLayout}
                            label="早起时间">
                            {
                                getFieldDecorator('time', {})(
                                    <TimePicker/>
                                )
                            }
                        </FormItem>
                        <FormItem label="头像" {...formItemLayout}>
                            {
                                getFieldDecorator('userImg')(
                                    <Upload

                                        listType="picture-card"
                                        showUploadList={false}
                                        action="//jsonplaceholder.typicode.com/posts/"
                                        onChange={this.handleChange}
                                    >
                                        {this.state.userImg?<img src={this.state.userImg}/>:<Icon type="plus"/>}
                                    </Upload>
                                )
                            }
                        </FormItem>

                        <FormItem {...offsetLayout}>
                            {
                                getFieldDecorator('userDeal')(
                                    <Checkbox>我已阅读过<a href="#">慕课协议</a></Checkbox>
                                )
                            }
                        </FormItem>
                        <FormItem {...offsetLayout}>
                            <Button type="primary" onClick={this.handleSubmit}>注册</Button>
                        </FormItem>


                    </Form>
                </Card>

            </div>
        );
    }

}

export default Form.create()(FormRegister);
